*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #F7F8F9;
}
/*----------------------------------------------------头部----------------------------------------------------------*/
div#head{
    border: 1px dashed gray;
    box-shadow: 0 4px 3px rgba(0,0,0,0.3);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background-color: white;


}
div#head ul#headone{
    width: 1500px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    margin: auto;

}
li{
    list-style: none;
    margin-top: 10px;
}
div#head ul li a{
    text-decoration: none;
    color: gray;
}
div#head ul#headone li form .search{
    border-radius: 10px;
    outline: none;
    font-size: 14px;
    padding: 5px 2px;
    border: 1px solid gray;
}
div#head ul li a:hover{
    color: black;
}
/*--------------------------------------------资讯--------------------------------------------------   */
div#body{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    margin-top:100px;


}
div#new{
    width: 888px;
    font-size: 14px;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    justify-content: space-around;
    background-color:#FFFFFF ;
    box-shadow: 0 0 0 rgba(0,0,0,.8);
    }
div#body div#new a{
    text-decoration: none;
    color: black;
}
div#body div#new a:hover{
    color: skyblue;
}
 
div#new div#newone div.newoneh1,
div#new div#newtwo div.newoneh2{
    border-bottom: 1px dashed gray;
    padding: 10px 5px;
    line-height: 10px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
div#new li {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: 14px;
    width: 360px;
    line-height: 14px;

}
div#new li a{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
    display: block;
    word-break: keep-all;
 }
div#body span{
    color: gray;
    font-size: 10px;
}
div#new p{
    color: gray;
    font-size: 8px;
    white-space: nowrap;
    margin-left: 5px;
}
div#newone,div#newtwo{
    width: 380px;
    height: 400px;
}
div#body h2{
    margin-top: 5px;
}
/*------------------------------------------推荐专区-----------------------------------------------------------*/
div#new div#title{

    width: 824px;
    height: 88px;
    margin-top: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
div#title2 div.chang2{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

div#title div#title1 div.chang1
{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}div#title div#title1 div.chang1 div {
    padding-left: 5px;
    height: 20px;
    width: 122px;
    line-height: 20px;
    margin-top: 5px;
 }
div#title div#title2 div.chang3{
    width: 534px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

div#title div#title2 div.chang3 div{
     margin-top: 5px;
     width: 80px;
     height: 20px;
     line-height: 20px;
 }
div#title div#title1{
    background: linear-gradient(to bottom, #FFF4F0,#FFFCFB,#F8F4F5);
}
div#title div#title2{
    background: linear-gradient(to bottom,#F5F4F7,#EFF4FA,#F8FAFE);
}
div#title h3 {
   margin: 5px 10px;
}
/*--------------------------大前端专区  开发技能专区-------------------------------------*/
div#new div#skill{
    width: 888px;
    margin-top:20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
div#skill div#skill1 div.c1,
div#skill div#skill2 div.c2{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-bottom: 1px dashed gray;
    padding: 10px 5px;
    line-height: 10px;
    align-items: baseline;
}
/*div#skill div#skill1 div.c1 h3{*/
/*    height: 20px;*/
/*    line-height: 20px;*/
/*}*/
div#new img{
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
}
/*----------------------------------数据专区-----------------------------------*/
div#data{
    width: 888px;
    margin-top: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
div#data div#data1 div.data1-1,
div#data div#data2 div.data2-1{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-bottom: 1px dashed gray;
    padding: 10px 5px;
    line-height: 10px;
    align-items: baseline;
}
/*----------------------------------飞桨专区----------------------------------*/

div#d{
    width: 888px;
    margin-top: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
div#d div#d1 div.d1-1,
div#d div#d2 div.d2-1{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-bottom: 1px dashed gray;
    padding: 10px 5px;
    line-height: 10px;
    align-items: baseline;
}
/*-----------------------------------------AI---------------------------------------------------------*/

div#AI{
    width: 888px;
    margin-top: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
div#AI div#AI1 div.AI1-1,
div#AI div#AI2 div.AI2-1 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-bottom: 1px dashed gray;
    padding: 10px 5px;
    line-height: 10px;
    align-items: baseline;
}





/*---------------------------------------右边---------------------------------------------------------*/
div#body div#right{
    width: 288px;
    height: 2300px;

}
div#body div#right>div{
    width: 240px;
    height: 364px;
    margin-bottom: 20px;
    border: 1px solid red;
    background-color: #FFFFFF;
}


/*--------------------------------------最后--------------------------------------------------*/
div#last{
    margin-top: 40px;
    width: 100%;
    height: 200px;
    border: 1px solid red;
    background-color: #FFFFFF;
}